<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>

    <!-- unpkg.com 国内镜像 unpkg.zhimg.com -->

    <!-- vue2 -->
    <script src="https://unpkg.zhimg.com/vue@2.6/dist/vue.min.js"></script>

    <!-- 引入网络 -->
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>


    <!-- element-ui -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>

    <script src="https://unpkg.com/echarts@5.4.2/dist/echarts.min.js"></script>

    <!-- 引入APP段控制台工具 -->
    <script src="//cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
</head>
<body>
<div id="app">
    <el-input v-model="formula"
              type="textarea"
              :rows="10"
              placeholder="eval表达式"></el-input>
    <el-button type="primary" @click="evalFormula">计算</el-button>
    <el-input v-model="result"
              type="textarea"
              :rows="10"
              placeholder="结果"></el-input>
    <el-divider></el-divider>
    <div id="chart" style="width:100%;height: 400px;border: solid 1px #aaa">

    </div>
    <el-input v-model="echartOption"
              @keyup.enter.native="renderChart"
              type="textarea"
              :rows="50"
              @change="renderChart"
              placeholder="echarts的选项"></el-input>

</div>
</body>
<script>
    // 定义默认的参数
    axios.defaults.headers['Content-Type'] = 'application/json'

    Vue.prototype.$axios = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 30 * 60 * 1000,
        responseType: 'json'
    })

    RegistryEchatsCustomTheme(echarts)
    Vue.prototype.$echarts = echarts

    var app = new Vue({
        el: '#app',
        data: {
            formula: '',
            result: '',
            echartOption: '',
            defaultOption: {
                title: {
                    text: '月告警统计表',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                yAxis: {
                    type: 'value'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        rotate: -90, // 强制显示所有列名
                    },
                    data: ['1月','2月','3月','4月']
                },
                series: [
                    {
                        type: 'line',
                        data: [12,18,7,14],
                        markPoint: {
                            data: [
                                {type: 'max', name: 'Max'},
                                {type: 'min', name: 'Min'}
                            ],
                        },
                        markLine: {
                            data: [{type: 'average', name: 'Avg'}]
                        },
                    }
                ]
            }
        },
        mounted() {
            this.echartOption=JSON.stringify(this.defaultOption,null,'    ')
            this.renderChart()
        },
        created() {

        },
        methods: {
            evalFormula() {
                let res = eval(this.formula)
                try {
                    let json = JSON.stringify(res, null, '    ')
                    this.result = json
                } catch (e) {
                    if (e.stack) {
                        this.result = e.stack
                    } else if (e.message) {
                        this.result = e.message
                    } else {
                        this.result = JSON.stringify(e, null, '    ')
                    }
                }

            },
            setOption(echartsId, option, callback) {
                // 基于准备好的dom，初始化echarts实例
                let _this = this
                let echarts = this.$echarts
                let renderFunc = function (echartsObj) {
                    echartsObj.setOption(option)
                    if (callback) {
                        callback(echartsObj)
                    }
                }
                let ensureFunc=function() {
                    let echartsObj = null

                    let dom = document.getElementById(echartsId);
                    if (dom != null && dom != undefined) {
                        echartsObj = echarts.init(dom, 'custom')
                    }

                    if (echartsObj == null || echartsObj == undefined) {
                        setTimeout(ensureFunc, 30)
                    } else {
                        renderFunc(echartsObj)
                    }
                }
                ensureFunc()
            },
            renderChart() {
                let domId = 'chart'

                let option=JSON.parse(this.echartOption)
                this.setOption(domId, option)
            }
        }
    })

    function RegistryEchatsCustomTheme(echarts) {

        let theme = {
            "color": [
                "#3060fb",
                "#24ef95",
                "#ffb60f",
                "#f17435",
                "#7db0e7",
                "#75efdd"
            ],
            "backgroundColor": "rgba(252,252,252,0)",
            "textStyle": {},
            "title": {
                "textStyle": {
                    "color": "#555555"
                },
                "subtextStyle": {
                    "color": "#999999"
                }
            },
            "line": {
                "itemStyle": {
                    "borderWidth": "2"
                },
                "lineStyle": {
                    "width": "3"
                },
                "symbolSize": "8",
                "symbol": "emptyCircle",
                "smooth": false
            },
            "radar": {
                "itemStyle": {
                    "borderWidth": "2"
                },
                "lineStyle": {
                    "width": "3"
                },
                "symbolSize": "8",
                "symbol": "emptyCircle",
                "smooth": false
            },
            "bar": {
                "itemStyle": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                }
            },
            "pie": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "scatter": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "boxplot": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "parallel": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "sankey": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "funnel": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "gauge": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "candlestick": {
                "itemStyle": {
                    "color": "rgba(0,0,0,0)",
                    "color0": "transparent",
                    "borderColor": "#ff0000",
                    "borderColor0": "#29b232",
                    "borderWidth": "2"
                }
            },
            "graph": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "lineStyle": {
                    "width": "1",
                    "color": "#bbb9b9"
                },
                "symbolSize": "8",
                "symbol": "emptyCircle",
                "smooth": false,
                "color": [
                    "#3060fb",
                    "#24ef95",
                    "#ffb60f",
                    "#f17435",
                    "#7db0e7",
                    "#75efdd"
                ],
                "label": {
                    "color": "#ffffff"
                }
            },
            "map": {
                "itemStyle": {
                    "areaColor": "#eeeeee",
                    "borderColor": "#aaaaaa",
                    "borderWidth": 0.5
                },
                "label": {
                    "color": "#ffffff"
                },
                "emphasis": {
                    "itemStyle": {
                        "areaColor": "rgba(63,177,227,0.25)",
                        "borderColor": "#3fb1e3",
                        "borderWidth": 1
                    },
                    "label": {
                        "color": "#3fb1e3"
                    }
                }
            },
            "geo": {
                "itemStyle": {
                    "areaColor": "#eeeeee",
                    "borderColor": "#aaaaaa",
                    "borderWidth": 0.5
                },
                "label": {
                    "color": "#ffffff"
                },
                "emphasis": {
                    "itemStyle": {
                        "areaColor": "rgba(63,177,227,0.25)",
                        "borderColor": "#3fb1e3",
                        "borderWidth": 1
                    },
                    "label": {
                        "color": "#3fb1e3"
                    }
                }
            },
            "categoryAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "color": "#787878"
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "valueAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "color": "#787878"
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "logAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "color": "#787878"
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "timeAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "color": "#787878"
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "toolbox": {
                "iconStyle": {
                    "borderColor": "#999999"
                },
                "emphasis": {
                    "iconStyle": {
                        "borderColor": "#666666"
                    }
                }
            },
            "legend": {
                "textStyle": {
                    "color": "#696969"
                }
            },
            "tooltip": {
                "axisPointer": {
                    "lineStyle": {
                        "color": "#a4a4a4",
                        "width": 1
                    },
                    "crossStyle": {
                        "color": "#a4a4a4",
                        "width": 1
                    }
                }
            },
            "timeline": {
                "lineStyle": {
                    "color": "#bfbfbf",
                    "width": 1
                },
                "itemStyle": {
                    "color": "#94a0b2",
                    "borderWidth": 1
                },
                "controlStyle": {
                    "color": "#c4c4c4",
                    "borderColor": "#c4c4c4",
                    "borderWidth": 0.5
                },
                "checkpointStyle": {
                    "color": "#2e5fff",
                    "borderColor": "#47bbf4"
                },
                "label": {
                    "color": "#595959"
                },
                "emphasis": {
                    "itemStyle": {
                        "color": "#6a8cf7"
                    },
                    "controlStyle": {
                        "color": "#c4c4c4",
                        "borderColor": "#c4c4c4",
                        "borderWidth": 0.5
                    },
                    "label": {
                        "color": "#595959"
                    }
                }
            },
            "visualMap": {
                "color": [
                    "#ff0000",
                    "#ff8400",
                    "#ffd100",
                    "#bffbde",
                    "#63c5ff",
                    "#969ffe",
                    "#897fdf"
                ]
            },
            "dataZoom": {
                "backgroundColor": "rgba(255,255,255,0)",
                "dataBackgroundColor": "rgba(222,222,222,1)",
                "fillerColor": "rgba(114,230,212,0.25)",
                "handleColor": "#cccccc",
                "handleSize": "100%",
                "textStyle": {
                    "color": "#999999"
                }
            },
            "markPoint": {
                "label": {
                    "color": "#ffffff"
                },
                "emphasis": {
                    "label": {
                        "color": "#ffffff"
                    }
                }
            }
        }

        echarts.registerTheme('custom', theme);
    }
</script>
</html>